<template>
  <view class="wrap public-font" :style="colorStyle">
    <view class="p-20">
      <view v-for="(item,index) in cartInfo" :key="index" class="order_goods p-20 bg--w111-fff">
        <view class="flex">
          <image v-if="item.productInfo.attrInfo" :src='item.productInfo.attrInfo.image' class="w-136 h-136 rd-16rpx"></image>
          <image v-else :src='item.productInfo.image' class="w-136 h-136 rd-16rpx"></image>
          <view class="flex-1 flex justify-between pl-20">
            <view class="flex-1">
              <view class="w-full line2 fs-28 lh-40rpx">
                {{item.productInfo.store_name}}
              </view>
              <view class="w-full line1 fs-24 text--w111-999 lh-34rpx mt-8">{{item.productInfo.attrInfo.suk_alias}}</view>
            </view>
<!--            <view class="flex-1 flex-col items-end">-->
<!--            </view>-->
          </view>
        </view>
      </view>
    </view>

    <view  class="address-box">
      <view class="item item-1">
        <view class="line"></view>
        <view class="l">寄</view>
        <view class="r">
          <view class="r-1 mb-10">
            {{returnDetail.sender.name}}：{{returnDetail.sender.phone}}
          </view>
          <view class="r-2">
            {{returnDetail.sender.address}}
          </view>
        </view>
      </view>
      <view class="item">
        <view class="l l-2">收</view>
        <view class="r">
          <view class="r-1">
            {{returnDetail.receiver.name}}：{{returnDetail.receiver.phone}}
          </view>
          <view class="r-2">
            {{returnDetail.receiver.address}}
          </view>
        </view>
      </view>
    </view>

    <view  class="time-box">
      <view class="item time-item">
        <view class="l">快递公司</view>
        <view class="r fw-bold">
          <view>{{returnDetail.logistics_name}}</view>
        </view>
      </view>
      <view class="item time-item">
        <view class="l">物流单号</view>
        <view class="r fw-bold">
          <view>
            {{returnDetail.logistics_no}}
          </view>
        </view>
      </view>
      <view class="item time-item">
        <view class="l">实付运费</view>
        <view class="r fw-bold">
          <view>{{returnDetail.fee}}</view>
        </view>
      </view>
      <view class="item time-item">
        <view class="l">申请归还时间</view>
        <view class="r fw-bold">
          <view>{{returnDetail.add_time}}</view>
        </view>
      </view>
    </view>

    <view class="log-box">
      <view class="fs-26">
        物流详情
      </view>
      <view class="logisticsCon mt-50 relative" v-if="expressList.length">
        <view class='item' v-for="(item,index) in logisticList" :key="index">
          <view class='circular' :class='index === 0 ? "on text-center":""'>
            <text class="iconfont icon-ic_complete text--w111-fff fs-24" v-if="index == 0"></text>
          </view>
          <view class='text' :class='index===0 ? "on-font on":""'>
            <view>{{item.status}}</view>
            <view class='data' :class='index===0 ? "on-font on":""'>{{item.time}}</view>
          </view>
        </view>
        <view class="more-text fs-24" @tap="checkShowMore">
          <text>{{showMore ? '收起' : '查看更多物流信息'}}</text>
          <text class="iconfont fs-24 pl-8" :class="showMore ? 'icon-ic_uparrow' : 'icon-ic_downarrow'"></text>
        </view>
      </view>
      <emptyPage title="暂无物流信息" src="/statics/images/noExpress.gif" v-else></emptyPage>
    </view>

    <view class="bottom-box" v-if="returnDetail.cancel=='y'">
      <view @click="cancelBook" class="btn-square btn-ghost w-full">
        取消预约
      </view>
    </view>
  </view>
</template>

<script>
import {express, getOrderDetail, returnExpress} from "@/api/order";
import colors from "@/mixins/color";
import {cancelSf, getBackDetail} from "@/api/leaseOrder";
import emptyPage from "@/components/emptyPage.vue";
export default {
  components: {emptyPage},
  mixins: [colors],
  data() {
    return {
      cartInfo:{},
      orderInfo:{},
      returnDetail:'',
      back_id:'',
      expressList:[],
      showMore: false
    }
  },
  onLoad(options){
    this.order_id = options.order_id
    this.getOrderInfo()
  },
  computed: {
    logisticList(){
      if(this.showMore){
        return this.expressList
      }else{
        return this.expressList.slice(0,1)
      }
    }
  },
  methods: {
    getOrderInfo(){
      getOrderDetail(this.order_id).then(res=>{
        this.cartInfo = res.data.cartInfo;
        this.orderInfo=res.data
        this.back_id = res.data.back_id
        this.getSfDetail()
        this.getExpress()
      })
    },
    getSfDetail(){
      getBackDetail({
        back_id:this.back_id
      }).then(res=>{
        this.returnDetail=res.data
      })
    },
    cancelBook(){
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定取消预约吗？',
        success: function (res) {
          if (res.confirm) {
            cancelSf({
              back_id: that.back_id
            }).then(res=>{
              uni.showToast({
                title: '取消成功',
                icon: 'none'
              })
              setTimeout(()=>{
                uni.navigateBack()
              },500)
            })
          }
        }
      })
    },

    checkShowMore(){
      this.showMore = !this.showMore
    },
    getExpress() {
      returnExpress({
        back_id: this.back_id
      }).then((res)=> {
        if (Array.isArray(res.data.info)) {
          this.expressList = res.data.info;
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-bottom: 300rpx;
}
.success-tip{
  padding: 30rpx;
  background: #fff;
  .tip-1{
    font-size: 30rpx;
    display: flex;
    align-items: center;
    .ebao-iconfont{
      margin-right: 10rpx;
    }
  }
  .tip-3{
    padding: 20rpx;
    background: #f5f5f5;
  }
}
.address-box{
  background: #fff;
  padding: 30rpx;
  .item-1{
    position: relative;
    padding-bottom: 60rpx;
    .line{
      position: absolute;
      height: 100%;
      border: 1rpx dashed #333;
      left: 25rpx;
      top: 25rpx;
    }
  }
  .item{
    display: flex;
    .l{
      background: #029eff;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 30rpx;
      z-index: 10;
    }
    .l-2{
      background: #333333;
    }
    .r{
      flex:1;
      padding-top: 8rpx;
    }
    .btn{
      align-self: center;
      margin-left: 20rpx;
      padding-left: 10rpx;
      color: #999;
      margin-top: 20rpx;
      border-left: 1rpx solid  #ddd;
      line-height: 1;
    }
  }
}

.time-box {
  background: #fff;
  padding: 0 30rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  .item{
    padding: 36rpx 20px;
    border-bottom: 1rpx solid #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:last-child{
      border-bottom: none;
    }
    .l{
      color: #333;
    }
    .r{

    }
  }
  .time-item{
    .r{
      display: flex;
      align-items: center;
    }
  }
  .return-item{
    .r{
      position: relative;
      .tip{
        position: absolute;
        font-size: 18rpx;
        white-space: nowrap;
        right: 0;
      }
    }
  }
}

.log-box{
  background: #fff;
  padding: 30rpx;
  .logisticsCon .item {
    padding: 0 20rpx;
    position: relative;
  }

  .logisticsCon .item .circular {
    width: 14rpx;
    height: 14rpx;
    border-radius: 50%;
    position: absolute;
    left: 14rpx;
    background-color: #ddd;
  }

  .logisticsCon .item .circular.on {
    width: 40rpx;
    height: 40rpx;
    background-color: var(--view-theme);
    left: 0;
  }

  .logisticsCon .item .text.on-font {
    color: var(--view-theme);
  }

  .logisticsCon .item .text .data.on-font {
    color: var(--view-theme);
  }

  .logisticsCon .item .text {
    font-size: 26rpx;
    color: #666;
    width: 615rpx;
    border-left: 1rpx solid #e6e6e6;
    padding: 0 0 40rpx 38rpx;
  }

  .logisticsCon .item .text .data {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }

  .logisticsCon .item .text .data .time {
    margin-left: 15rpx;
  }
}

.bottom-box{
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  border-top: 1rpx solid #f5f5f5;
  background: #fff;
  .btn-square{
    height: 80rpx;
  }
}
</style>